<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
      <div id="con">
          <h1 v-myshow="flag">显示隐藏</h1>
          <button @click="flag=!flag">切换</button>
          <input type="text" v-focus>
          <button v-permission="userCode">添加</button>
          <button v-permission="userCode">删除</button>
          <button v-permission="userCode">修改</button>
      </div>
    </div> 

 <hr>
    <div id="test">
          <h1 v-myshow="ck">第二组件的显示隐藏</h1>
        
    </div>
     <script src="./vue.js"></script>
     <script>
      // 
      // vue的自定义指令 Vue.directive()
       //  Vue.directive('指令名',{}) //全局方法 自定义指令  任意组件都可以使用
      //  自定义指令的钩子函数bind，inserted，update，componentUpdated，unbind
       Vue.directive("myshow",{
            bind(){} ,//指令第一次绑定到元素上的时候调用
            inserted(el,binding){
              //  el---当前挂载指令的元素 原生元素
              // binding---指令的参数
              // binding.value--指令后的值
                if(binding.value){
                  el.style.display="block";
                }else{
                  el.style.display="none"
                }



            },//指令绑定到元素上，已经渲染好了
            update(el,binding){
              console.log(binding.value,"值")
                if(binding.value){
                  el.style.display="block";
                }else{
                  el.style.display="none"
                }

            }, //指令所在元素内容更新
            componentUpdated(){},//指令所在组件的自身和子元素更新
            unbind(){}//指令与元素解绑
       })

      //  按钮级别的权限的管理 根据后台登录后返回的用户身份状态码，
      // 封装自定义指令 来实现按钮权限的控制
        // 身份状态码  超级管理员1  管理员2 
        // 普通用户 3
        // 
        Vue.directive('permission',{
          inserted(el,binding){
             if(binding.value==1){
               el.disabled=false;
             }
             if(binding.value==2){
              el.disabled=true;
             }
              if(binding.value==3){
              el.style.display="none";
             }
          }
        })


       
      //  第一个组件
        new Vue({
          el:"#app",
          data(){
            return {
              flag:true,
              userCode:3
            }
          },
          methods:{
            
          },
          directives:{ //创建局部指令
             focus:{ //指令名
              bind(){},
              inserted(el,binding){ 
                   el.focus() //绑定当前元素的指令 自动获取焦点
              },
              update(){},
              componentUpdated(){},
              unbind(){}
             }
          }
        })
        // 第二个组件
        new Vue({
          el:"#test",
          data(){
            return {
              ck:true
            }
          }
        })


     </script>
</body>
</html>